<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		loadAllInfo();
		function $(id){return document.getElementById(id);}
		function saveInfo(){
			var name1=$("username").value;
			var phone1=$("userphone").value;
			if (name1!=""&& phone1!=""){
				localStorage.setItem(name1,phone1);
				loadAllInfo();
				alert("添加成功");	
			}
			else{
				alert("请输入姓名和电话");
				$("username").focus();
			}
		}
		function findForName(){
			var searchname=$("search_name").value;
			var searchphone=localStorage.getItem(searchname);
			$("userphone1").value=searchphone;
		}
		function loadAllInfo(){
			var result="";
			if(localStorage.length>0){
				result+="姓名  电话</br><hr>";
				for(var i=0;i<localStorage.length;i++){
					var name=localStorage.key(i);
					var phone=localStorage.getItem(name);
					result +=name+" --- "+phone+"</br>";
				}
				$("displayallinfo").innerHTML=result;
			}else{
				$("displayallinfo").innerHTML="数据为空......";
			}
		}
		function deleteName(){
			localStorage.removeItem($("search_name").value);
			$("search_name").value=="";
			loadAllInfo();
		}
		
		</script>
	</head>
	<body>
		<fieldset style="float: left;width: 300px;text-align: center;">
			<legend>通讯录添加</legend><label for="name">姓名（key）:</label>
			<input type="text" id="username" name="username" required/><br />
			<label for="telephone">电话（value）:</label>
			<input type="text" id="userphone" name="userphone" required/><br />
			<br />
			<input type="button" onclick="saveInfo()" value="添加通讯录"/>
			<input type="reset"/>
			<div id="displayallinfo" name="displayallinfo"></div>
		</fieldset>
		<fieldset style="float: left; width: 300px;height: 100px;text-align: center;">
			<legend>通讯录查询与删除</legend>
			<label for="search_phone">输入姓名:</label>
			<input type="text" id="search_name" name="search_name" required/><br />
			<label>电话：</label><input type="text" name="" id="userphone1" readonly/>
			<br><input type="button" onclick="findForName()" value="查找通讯录"/>
			<input type="button" onclick="deleteName()" value="删除通讯录"/>
		</fieldset>
	</body>
</html>
